<template>
	<div style="height: 400px" ref="homeLineRef"></div>
</template>

<script setup name="LINE">
import * as echarts from 'echarts';

const props = defineProps({
	line_x: {
		type: Array,
		default: () => [],
	},
	lineData: {
		type: Array,
		default: () => [],
	},
});
// 引入组件
const homeLineRef = ref();
let line;
//柱状图
const initLineChart = () => {
	line = markRaw(echarts.init(homeLineRef.value, ''));
	const option = {
		title: {
			text: '',
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985',
				},
			},
		},

		toolbox: {
			feature: {
				saveAsImage: {},
			},
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true,
		},
		xAxis: [
			{
				type: 'category',
				boundaryGap: false,
				data: props.line_x,
			},
		],
		yAxis: [
			{
				type: 'value',
			},
		],
		series: {
      name: '数据1',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      data:props.lineData,

    }
	};
	line.setOption(option);
};

onMounted(() => {
  nextTick(()=> {
    console.log(props.lineData)
    initLineChart();
  });
});
</script>
